
<template>
	<div class="system-datainterface-container layout-padding">
		<!-- 最底层 -->
		<el-card shadow="hover" class="layout-padding-auto">



			<div class="table-search-container">
				<el-form ref="tableSearchRef" :model="state.ruleForm" size="default" label-width="120px" class="table-form">
					<el-row>




						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
							<el-form-item label="接口名称">
								<el-input v-model="state.ruleForm.interfaceName" style="width: 100%"
									placeholder="接口名称"></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
							<el-form-item label="名称MD5">
								<el-input v-model="state.ruleForm.md5" style="width: 100%" placeholder="名称MD5"></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
							<el-form-item label="最后更新人">
								<el-input v-model="state.ruleForm.createdOrUpdateUserName" style="width: 100%"
									placeholder="最后更新人"></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
							<el-form-item label="内容">
								<el-input v-model="state.ruleForm.urlOrSqlContent" style="width: 100%"
									placeholder="sql或者REST服务的URL"></el-input>
							</el-form-item>
						</el-col>




						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
							<el-form-item label="接口类型">
								<el-select v-model="state.ruleForm.interfaceType" placeholder="接口类型" clearable
									:multiple="true" class="input-width" style="width: 100%">
									<el-option key="rest" label="REST服务" value="rest"></el-option>
									<el-option key="sql" label="动态SQL" value="sql"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
							<el-form-item label="授权方式">
								<el-select v-model="state.ruleForm.authMethod" placeholder="授权方式" clearable :multiple="true"
									class="input-width" style="width: 100%">
									<el-option key="NOAUTH" label="不用授权" value="NOAUTH"></el-option>
									<el-option key="ALLSYSTEMUSER" label="需登录" value="ALLSYSTEMUSER"></el-option>
									<el-option key="BYUSERPERMISSION" label="需授权" value="BYUSERPERMISSION"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
							<el-form-item label="所属服务">
								<el-select v-model="state.ruleForm.microServiceName" placeholder="所属服务" clearable
									:multiple="true" class="input-width" style="width: 100%">
									<el-option v-for="item in state.microServiceList" :key="item.dicItemValue"
										:label="item.dicItemName" :value="item.dicItemValue"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
							<el-form-item label="状态">
								<el-select v-model="state.ruleForm.status" placeholder="状态" clearable :multiple="true"
									class="input-width" style="width: 100%">
									<el-option v-for="item in state.statusList" :key="item.dicItemValue"
										:label="item.dicItemName" :value="item.dicItemValue"></el-option>
								</el-select>
							</el-form-item>
						</el-col>





						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-show="state.isToggle">
							<el-form-item label="更新时间">
								<el-date-picker v-model="state.ruleForm.createdOrUpdateTime" type="datetimerange"
									:picker-options="state.pickerOptions" range-separator="至" start-placeholder="开始日期"
									end-placeholder="结束日期" align="right">
								</el-date-picker>
							</el-form-item>
						</el-col>


						<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item class="table-form-btn" :label-width="!state.isToggle ? '10px' : '35px'">
								<div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
									<span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
									<SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
								</div>
								<div>
									<el-button size="default" type="primary" @click="refresh()">查询
									</el-button>
									<el-button size="default" type="info" class="ml10" @click="handleResetSearch()"> 重置
									</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>








			<!-- 添加删除按钮兰 -->
			<el-card shadow="hover" class="layout-padding-auto">
				<div class="bar_tools">
					<el-button-group class="ml-4">
						<el-button type="primary" size="default" @click="handleAdd()">添加</el-button>
						<el-button type="primary" size="default" @click="handlerMultiDelete()">删除</el-button>
					</el-button-group>
				</div>

				<el-table size="default" :data="state.tableData" @selection-change="handleSelectionChange" style="width: 100%">
					<el-table-column type="selection" width="50"></el-table-column>

					<el-table-column column-key="interfaceName" type="expand">
						<template #default="scope">
							<el-card>
								<el-row>
									<el-col :span="24">参数列表</el-col>
									<el-col :span="24">&nbsp;&nbsp;</el-col>
									<el-col :span="24">接口内容:</el-col>
									<el-col :span="24">&nbsp;&nbsp;</el-col>
									<el-col :span="24">
										{{ scope.row.urlOrSqlContent }}
									</el-col>
								</el-row>
							</el-card>
							<el-row>
								<el-col :span="24">
									<el-table size="default" :data="scope.row.params">
										<el-table-column label="序号" prop="seq"></el-table-column>
										<el-table-column label="名称" prop="fieldName"></el-table-column>
										<el-table-column label="类型" prop="fieldType"></el-table-column>
										<el-table-column label="描述" prop="description"></el-table-column>
										<el-table-column label="状态" prop="status">
											<template #default="scopeParam">
												<el-tag :type="scopeParam.row.status === 1 ? 'success' : 'warning'"
													effect="dark">{{ getStatus(scope.row.status) }}</el-tag>
											</template>
										</el-table-column>
									</el-table>
								</el-col>
							</el-row>
						</template>
					</el-table-column>

					<el-table-column label="md5" prop="md5" width="270"></el-table-column>
					<el-table-column label="接口名称" prop="interfaceName"></el-table-column>
					<el-table-column label="接口类型" prop="interfaceType"></el-table-column>

					<el-table-column prop="status" label="授权方式">
						<template #default="scope">
							<el-tag v-if="scope.row.authMethod == 'NOAUTH'"
								:type="scope.row.status === 1 ? 'success' : 'warning'" effect="dark">不用授权</el-tag>
							<el-tag v-if="scope.row.authMethod == 'ALLSYSTEMUSER'"
								:type="scope.row.status === 1 ? 'success' : 'warning'" effect="dark">需登录</el-tag>
							<el-tag v-if="scope.row.authMethod == 'BYUSERPERMISSION'"
								:type="scope.row.status === 1 ? 'success' : 'warning'" effect="dark">需授权</el-tag>
						</template>
					</el-table-column>

					<el-table-column label="所属服务" prop="microServiceName">
						<template #default="scope">
							<el-tag :type="scope.row.status === 1 ? 'success' : 'warning'"> {{ getDic('microServiceList',
								scope.row.microServiceName) }}</el-tag>
						</template>
					</el-table-column>

					<el-table-column label="更新时间" prop="createdOrUpdateTime">
						<template #default="scope">
							<span>{{ formatDate(new Date(scope.row.createdOrUpdateTime), 'YYYY-mm-dd HH:MM:SS') }}</span>
						</template>
					</el-table-column>
					<el-table-column label="更新人" prop="createdOrUpdateUserName" width="180"></el-table-column>

					<el-table-column prop="status" label="状态" width="100">
						<template #default="scope">
							<el-tag :type="scope.row.status === 1 ? 'success' : 'warning'" effect="dark">{{
								getStatus(scope.row.status) }}</el-tag>
						</template>
					</el-table-column>

					<el-table-column label="操作" width="200">
						<template #default="scope">
							<el-button-group>
								<el-button type="primary" size="default" title="修改"
									@click="handlerEdit(scope.$index, scope.row)"> 编辑 </el-button>
								<el-button @click="handlerAcitiveOrInactive(scope.row)"
									:type="scope.row.status === 1 ? 'danger' : 'success'" size="default"
									:title="scope.row.status == 1 ? '失效' : '生效'">
									{{ scope.row.status == 1 ? '失效' : '生效' }}
								</el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</el-table>
			</el-card>

			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
				:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.ruleForm.page" background
				v-model:page-size="state.ruleForm.limit" layout="total, sizes, prev, pager, next, jumper"
				:total="state.ruleForm.total">
			</el-pagination>
		</el-card>

		<interfaceDialog ref="interfaceDialogRef" @refresh="refresh" />
	</div>
</template>

<script setup lang="ts" name="datainterface">
import { formatDate } from './../../../utils/formatTime';
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// 导入接口
import { useSysApi } from '../../../api/sys';

// 引入组件
const interfaceDialog = defineAsyncComponent(() => import('/@/views/system/datainterface/dialog.vue'));
const interfaceDialogRef = ref();

const state = reactive({
	isToggle: false,
	tableData: [],
	statusList: [] as any,
	microServiceList: [] as any,
	pickerOptions: {
		shortcuts: [
			{
				text: '最近一周',
				onClick(picker: any) {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					picker.$emit('pick', [start, end]);
				},
			},
			{
				text: '最近一个月',
				onClick(picker: any) {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					picker.$emit('pick', [start, end]);
				},
			},
			{
				text: '最近三个月',
				onClick(picker: any) {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
					picker.$emit('pick', [start, end]);
				},
			},
		],
	},
	multipleSelection: [], // 选择的项

	ruleForm: {
		page: 1,
		limit: 10,
		total: 0,
		interfaceName: '',
		md5: '',
		createdOrUpdateUserName: '',
		urlOrSqlContent: '',
		interfaceType: [],
		authMethod: [],
		microServiceName: [],
		status: [],
		createdOrUpdateTime: [],
	},
});

const handleResetSearch = () => {
	state.ruleForm = {
		page: 1,
		limit: 10,
		total: 0,
		interfaceName: '',
		md5: '',
		createdOrUpdateUserName: '',
		urlOrSqlContent: '',
		interfaceType: [],
		authMethod: [],
		microServiceName: [],
		status: [],
		createdOrUpdateTime: [],
	};
	pagedQueryDataInterface();
};

const handleAdd = () => {
	interfaceDialogRef.value.openDialog('add');
};

const refresh = () => {
	pagedQueryDataInterface();
};

const handlerMultiDelete = () => {
	if (state.multipleSelection.length <= 0) return ElMessage.error('请选择您要删除的项');
	let oids = [] as any;
	state.multipleSelection.forEach((element: any) => {
		oids.push(element._id);
	});

	ElMessageBox.confirm('您确定要删除选择的项吗?', 'Warning', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		try {
			await useSysApi().dataInterfaceDeleteByIds(oids);
			ElMessage.success('操作成功');
			refresh();
		} catch (error: any) {
			ElMessage.error(error.msg);
		}
	});
};

const handleSelectionChange = (val: any) => {
	state.multipleSelection = val;
};

const handlerEdit = (index: any, row: any) => {
	interfaceDialogRef.value.openDialog('edit', row);
};

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.ruleForm.limit = val;
	pagedQueryDataInterface();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.ruleForm.page = val;
	pagedQueryDataInterface();
};

const pagedQueryDataInterface = async () => {
	try {
		let vo = {
			params: [
				{
					name: 'interfaceName',
					relationalOperator: 'AND',
					operator: 'REGEX',
					value: state.ruleForm.interfaceName,
					placeholder: '接口名称',
					label: '接口名称',
				},
				{
					name: 'md5',
					relationalOperator: 'AND',
					operator: 'IS',
					value: state.ruleForm.md5,
					placeholder: 'MD5',
					label: '名称MD5',
				},
				{
					name: 'createdOrUpdateUserName',
					relationalOperator: 'AND',
					operator: 'REGEX',
					value: state.ruleForm.createdOrUpdateUserName,
					placeholder: '最后更新人',
					label: '最后更新人',
				},
				{
					name: 'interfaceType',
					relationalOperator: 'AND',
					operator: 'IN',
					label: '接口类型',
					eleType: 'SELECT',
					isMulti: true,
					options: [
						{
							label: 'REST服务',
							value: 'rest',
							code: 'rest',
						},
						{
							label: '动态SQL',
							value: 'sql',
							code: 'sql',
						},
					],
					value: state.ruleForm.interfaceType,
				},
				{
					name: 'authMethod',
					relationalOperator: 'AND',
					operator: 'IN',
					label: '授权方式',
					eleType: 'SELECT',
					isMulti: true,
					options: [
						{
							label: '不用授权',
							value: 'NOAUTH',
							code: 'NOAUTH',
						},
						{
							label: '需登录',
							value: 'ALLSYSTEMUSER',
							code: 'ALLSYSTEMUSER',
						},
						{
							label: '需授权',
							value: 'BYUSERPERMISSION',
							code: 'BYUSERPERMISSION',
						},
					],
					value: state.ruleForm.authMethod,
				},
				{
					name: 'urlOrSqlContent',
					relationalOperator: 'AND',
					operator: 'REGEX',
					value: state.ruleForm.urlOrSqlContent,
					placeholder: 'sql或者REST服务的URL',
					label: '内容',
				},
				{
					name: 'createdOrUpdateTime',
					relationalOperator: 'AND',
					operator: 'BETWEEN',
					dataType: 'Date',
					value: state.ruleForm.createdOrUpdateTime,
					label: '更新时间',
				},
				{
					name: 'microServiceName',
					relationalOperator: 'AND',
					operator: 'IN',
					label: '所属服务',
					eleType: 'SELECT',
					isMulti: true,
					options: [
						{
							value: 'General',
							label: '所有微服务通用',
							text: '所有微服务通用',
							code: 'General',
							extAttribut1: null,
							extAttribut2: null,
							extAttribut3: null,
							extAttribut4: null,
							extAttribut5: null,
							dicItemId: 25,
							dicMasterId: 16,
						},
						{
							value: 'COMMON-SERVICE',
							label: '通用基础服务',
							text: '通用基础服务',
							code: 'commonService',
							extAttribut1: '',
							extAttribut2: '',
							extAttribut3: null,
							extAttribut4: null,
							extAttribut5: null,
							dicItemId: 16,
							dicMasterId: 16,
						},
						{
							value: 'SPRING-GATEWAY',
							label: 'SPRING网关服务',
							text: 'SPRING网关服务',
							code: 'spring-gateway',
							extAttribut1: '',
							extAttribut2: '',
							extAttribut3: null,
							extAttribut4: null,
							extAttribut5: null,
							dicItemId: 20,
							dicMasterId: 16,
						},
						{
							value: 'UNKNOW-WALLET-SERVICE',
							label: 'UNKNOW-WALLET-SERVICE',
							text: 'UNKNOW-WALLET-SERVICE',
							code: 'UNKNOW-WALLET-SERVICE',
							extAttribut1: null,
							extAttribut2: null,
							extAttribut3: null,
							extAttribut4: null,
							extAttribut5: null,
							dicItemId: 101,
							dicMasterId: 16,
						},
						{
							value: 'UNKNOW-ACCOUNT-SERVICE',
							label: 'UNKNOW-ACCOUNT-SERVICE',
							text: 'UNKNOW-ACCOUNT-SERVICE',
							code: 'UNKNOW-ACCOUNT-SERVICE',
							extAttribut1: null,
							extAttribut2: null,
							extAttribut3: null,
							extAttribut4: null,
							extAttribut5: null,
							dicItemId: 100,
							dicMasterId: 16,
						},
					],
					value: state.ruleForm.microServiceName,
				},
				{
					name: 'status',
					relationalOperator: 'AND',
					operator: 'IN',
					label: '状态',
					eleType: 'SELECT',
					isMulti: true,
					options: [
						{
							value: 1,
							label: '有效',
							text: '有效',
							code: 'active',
							extAttribut1: '1',
							extAttribut2: '12',
							extAttribut3: null,
							extAttribut4: null,
							extAttribut5: null,
							dicItemId: 13,
							dicMasterId: 15,
						},
						{
							value: 0,
							label: '无效',
							text: '无效',
							code: 'inactive',
							extAttribut1: '2',
							extAttribut2: '',
							extAttribut3: null,
							extAttribut4: null,
							extAttribut5: null,
							dicItemId: 14,
							dicMasterId: 15,
						},
						{
							value: -1,
							label: '过期',
							text: '过期',
							code: 'expired',
							extAttribut1: '3',
							extAttribut2: '',
							extAttribut3: null,
							extAttribut4: null,
							extAttribut5: null,
							dicItemId: 15,
							dicMasterId: 15,
						},
					],
					value: state.ruleForm.status,
				},
			],
			orders: [{ direction: 'ASC', property: 'interfaceName' }],
		};

		let listTemp = await useSysApi().pagedQueryDataInterface(state.ruleForm.page, state.ruleForm.limit, vo);
		state.ruleForm.total = listTemp.total;
		state.tableData = listTemp.list;
	} catch (error: any) {
		ElMessage.error(error.msg);
	}
};

const selectDicItemsByDicCode = async () => {
	state.statusList = await useSysApi().selectDicItemsByDicCode('commStatus', 'General');
	state.microServiceList = await useSysApi().selectDicItemsByDicCode('microServiceList', 'General');
};

const handlerAcitiveOrInactive = async (row: any) => {
	try {
		if (row.status == 1) {
			await useSysApi().dataInterfaceInactiveByIds([row._id]);
			row.status = 0;
		} else {
			await useSysApi().dataInterfaceActiveByIds([row._id]);
			row.status = 1;
		}
		ElMessage.success('操作成功');
	} catch (error: any) {
		ElMessage.error(error.msg);
	}
};

const getDic = (obj: any, str: string) => {
	let strTemp = str;

	state[obj.toString()].forEach((element: any) => {
		if (element.dicItemValue == str) {
			strTemp = element.dicItemName;
		}
	});
	return strTemp;
};

const getStatus = (str: string) => {
	let strTemp = '';
	state.statusList.forEach((element: any) => {
		if (element.dicItemValue == str) {
			strTemp = element.dicItemName;
		}
	});
	return strTemp;
};

// 页面加载时
onMounted(() => {
	selectDicItemsByDicCode();
	// 获取字典状态编码
	pagedQueryDataInterface();
});
</script>




<style scoped lang="scss">
// .el-form .el-form-item:last-of-type {
// 	margin-bottom: 22px !important;
// }

.bar_tools {
	display: flex;
	flex-direction: row-reverse;
	margin-bottom: 10px;
}

.system-datainterface-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}

.bar_btn_div {
	display: flex;
	padding: 20px;
	border: 1px solid #ebeef5;
	align-items: center;
	justify-content: space-between;
	border-radius: 5px 5px 0px 0px;

	.title_div {
		display: flex;
		font-size: 16px;

		&>div {
			margin-right: 10px;
		}
	}
}

.search_div {
	border: 1px solid #ebeef5;
	border-top: 0px;
	border-radius: 0px 0px 5px 5px;
	padding: 20px;
	padding-bottom: 0px;
}

.table-search-container {
	display: flex;

	.table-form {
		flex: 1;

		.table-form-btn-toggle {
			white-space: nowrap;
			user-select: none;
			display: flex;
			align-items: center;
			color: var(--el-color-primary);
			margin-right: 15px;
		}
	}
}
</style>
